<template>
    <div class="de-result detect-box">
        <div class="headline flex-items">
            <div style="margin-left: 30px;">本机:</div>
            <el-select v-model="query.query" class="detect-search" style="width: 200px; margin: 0 10px;"
                placeholder="Select" size="large">
                <el-option label="禁用" :value="0" />
                <el-option label="启用" :value="1" />
            </el-select>

            <div>对方:</div>

            <el-select v-model="query.query" class="detect-search" style="width: 200px; margin: 0 10px;"
                placeholder="Select" size="large">
                <el-option label="禁用" :value="0" />
                <el-option label="启用" :value="1" />
            </el-select>

            <img src="@/assets/img/lij1.png" style="height: 10px;width: 30px;margin-right: 10px;"/>
            <div style="margin-left: 30px;">始时:</div>
            <el-select v-model="query.query" class="detect-search" style="width: 200px; margin: 0 10px;"
                placeholder="Select" size="large">
                <el-option label="禁用" :value="0" />
                <el-option label="启用" :value="1" />
            </el-select>

            <div>终时:</div>

            <el-select v-model="query.query" class="detect-search" style="width: 200px; margin: 0 10px;"
                placeholder="Select" size="large">
                <el-option label="禁用" :value="0" />
                <el-option label="启用" :value="1" />
            </el-select>

            <button class="oval-button" style="padding: 0 5px;">跨时任务查询</button>

            <button class="oval-button" style="background: #F1BF35; margin-left: 80px;">生成</button>

        </div>

        <div class="list">
            <div class="list-el-table">
                <el-table :data="gridData" class="table-list">
                    <el-table-column property="date" label="Date" width="150" align="center" />
                    <el-table-column property="name" label="Name" width="200" align="center"/>
                    <el-table-column property="address" label="Address" align="center" />
                </el-table>
            </div>
        </div>
        <div class="flex" style="margin-top:20px;">
            <div class="flex-left" style="margin-left: 20px; color: #9A9DAA;">共有{{ total }}项数据</div>
            <el-pagination class="flex-right" layout="prev, pager, next, jumper" style="margin-right: 50px;" :total="total"
                small />
        </div>
    </div>
</template>
<script>

export default {
    name: "detectResult",
    data() {
        return {
            visibles: false,
            query: {
                local: null,
                other: null,
            },
            gridData: [
                { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" },
                { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" },
                { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" }, { id: 1, name: "重庆方案1" }, { id: 2, name: "重庆方案2" }, { id: 3, name: "重庆方案3" }, { id: 4, name: "重庆方案4" },
            ],
            total: 1000,
        }
    },
    watch: {

    },
    mounted() {

    },
    unmounted() {
    },
    methods: {


    },
};
</script>
<style  lang="scss">
.de-result {
    // height: calc(100% - 80px);
    background: linear-gradient(to right, #313B53, #272F43);

    .headline {
        width: 100%;
        height: 108px;
        background: linear-gradient(to right, #313B53, #272F43);
        color: #9A9DAA;
        font-size: 14px;

        .el-input__wrapper {
            background-color: #394760;
            border-radius: 50px;
            width: 267px;
            box-shadow: 0 0 0 0;
        }
    }

    .list {
        height: calc(100% - 180px);
        background: linear-gradient(to right, #2C334C, #1D2435);
        .list-el-table {
            background: none;
            padding: 0 80px;
            height: calc(100%);
            .el-table {
                --el-table-border-color: none !important;
                --el-table-border: none;
                --el-table-bg-color: none !important;
                --el-table-header-text-color: hsl(223, 31%, 13%);
                --el-table-row-hover-bg-color: #171D2C;
                height: calc(100%);
            }

            .el-table .el-table__row td:first-child {
                border-radius: 50px 0 0 50px;
                padding: 2px;
                z-index: 999;
                padding-left: 20px;
            }

            /* //此代码是让每行右边侧变圆 */
            .el-table .el-table__row td:last-child {
                border-radius: 0 50px 50px 0;
                z-index: 999;
                padding: 2px;
            }

            .el-table tr {
                background-color: initial;
                color: #9A9DAA;
            }

            /* 偶数行 */
            .el-table .el-table__row:nth-child(odd) {
                background-color: #575D73;
                color: #9A9DAA;
            }

            .el-table .el-table__row {
                height: 50px;
            }

            .el-table th.el-table__cell {
                background: none;
                background-color: initial;
            }

            .el-table__row {
                border: none;
            }

        }
    }

}
</style>
  